import React from "react";
import { Button, Card, Input, Radio, Typography, message, Space } from "antd";
import { useForm, Controller } from "react-hook-form";
import { useNavigate, Link } from "react-router-dom";
import { UserRole } from "../../types/roles";
import { UserOutlined, LockOutlined, UserAddOutlined } from '@ant-design/icons';

const { Title } = Typography;

type RegisterFormValues = {
    phone: string;
    password: string;
    confirmPassword: string;
    name: string;
    idNumber: string;
    role: UserRole;
};

const Register: React.FC = () => {
    const navigate = useNavigate();
    const { control, handleSubmit, watch, formState: { errors, isSubmitting } } = useForm<RegisterFormValues>({
        defaultValues: {
            role: "patient"
        }
    });
    const password = watch("password");
    const onSubmit = async (values: RegisterFormValues) => {
        // 实际项目需将数据提交后端
        setTimeout(() => {
            message.success("注册成功，请登录");
            navigate("/login");
        }, 500);
    };
    return (
        <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: "#f2f2f7" }}>
            <Card style={{ width: 420 }} className="apple-card">
                <div className="apple-header" style={{ textAlign: "center", marginBottom: 24 }}>
                    <Title level={3} style={{ color: "#007aff", marginBottom: 8 }}>创建账户</Title>
                    <Typography.Text style={{ color: "#666" }}>请填写以下信息完成注册</Typography.Text>
                </div>
                <form onSubmit={handleSubmit(onSubmit)}>
                    <Space direction="vertical" style={{ width: "100%" }} size="large">
                        <Controller
                            name="phone"
                            control={control}
                            rules={{
                                required: "请输入手机号",
                                pattern: { value: /^1\d{10}$/, message: "请输入11位手机号" },
                            }}
                            render={({ field }) => (
                                <Input {...field} placeholder="手机号" maxLength={11} status={errors.phone ? "error" : ""} className="apple-input" prefix={<UserOutlined />} />
                            )}
                        />
                        {errors.phone && <span style={{ color: '#ff4d4f' }}>{errors.phone.message}</span>}
                        <Controller
                            name="password"
                            control={control}
                            rules={{ required: "请输入密码", minLength: { value: 6, message: "密码至少6位" } }}
                            render={({ field }) => (
                                <Input.Password {...field} placeholder="密码" status={errors.password ? "error" : ""} className="apple-input" prefix={<LockOutlined />} />
                            )}
                        />
                        {errors.password && <span style={{ color: '#ff4d4f' }}>{errors.password.message}</span>}
                        <Controller
                            name="confirmPassword"
                            control={control}
                            rules={{
                                required: "请确认密码",
                                validate: value => value === password || "两次密码不一致！"
                            }}
                            render={({ field }) => (
                                <Input.Password {...field} placeholder="确认密码" status={errors.confirmPassword ? "error" : ""} className="apple-input" prefix={<LockOutlined />} />
                            )}
                        />
                        {errors.confirmPassword && <span style={{ color: '#ff4d4f' }}>{errors.confirmPassword.message}</span>}
                        <Controller
                            name="name"
                            control={control}
                            rules={{ required: "请输入姓名" }}
                            render={({ field }) => (
                                <Input {...field} placeholder="姓名" status={errors.name ? "error" : ""} className="apple-input" prefix={<UserAddOutlined />} />
                            )}
                        />
                        {errors.name && <span style={{ color: '#ff4d4f' }}>{errors.name.message}</span>}
                        <Controller
                            name="idNumber"
                            control={control}
                            rules={{
                                required: "请输入身份证号",
                                pattern: { value: /^(\d{18}|\d{17}[Xx])$/, message: "请输入正确的身份证号" },
                            }}
                            render={({ field }) => (
                                <Input {...field} placeholder="身份证号" maxLength={18} status={errors.idNumber ? "error" : ""} className="apple-input" />
                            )}
                        />
                        {errors.idNumber && <span style={{ color: '#ff4d4f' }}>{errors.idNumber.message}</span>}
                        <div style={{ marginBottom: 16 }}>
                            <Typography.Text style={{ display: "block", marginBottom: 8, color: "#666" }}>用户类型</Typography.Text>
                            <Controller
                                name="role"
                                control={control}
                                render={({ field }) => (
                                    <Radio.Group {...field} className="apple-radio-group">
                                        <Radio.Button value="patient" className="apple-radio-button">患者</Radio.Button>
                                        <Radio.Button value="doctor" className="apple-radio-button">医护</Radio.Button>
                                    </Radio.Group>
                                )}
                            />
                        </div>
                        <Button type="primary" htmlType="submit" block loading={isSubmitting} className="apple-button-primary">
                            注册
                        </Button>
                        <Link to="/login">
                            <Button type="link" block className="apple-link-button">
                                已有账号？去登录
                            </Button>
                        </Link>
                    </Space>
                </form>
            </Card>
        </div>
    );
};
export default Register;
